<!-- 团队认证弹窗 -->
<template>
  <uni-popup ref="popup" type="center">
    <div class="container">
      <div class="title">团队认证</div>
      <image
        src="https://ustatic.hudongmiao.com/miao/activity/securityDun_compressed.png"
        class="security-image"
      ></image>
      <div class="tip">联系客服完成团队认证</div>
      <div class="contact-btn" @click="showQrcode">联系客服</div>
      <!-- <button open-type="contact" class="contact-btn">联系客服</button> -->
      <div class="cancel" @click="close"></div>
      <!-- 客服微信二维码 -->
      <div class="qrcode-box" v-if="qrcodeVisible">
        <image
          src="https://ustatic.hudongmiao.com/miao/web/assist.7fad9761.png"
          :show-menu-by-longpress="true"
          class="qrcode-img"
        ></image>
        <image
          class="close-icon"
          src="https://ustatic.hudongmiao.com/%20miao/index/close-icon.png"
          @click="hideQrcode"
        ></image>
      </div>
    </div>
  </uni-popup>
</template>

<script setup lang="ts">
const currentInstance = getCurrentInstance();

// #region 开关弹窗相关

/** 打开弹窗 */
const open = () => {
  const popup = currentInstance?.refs.popup as UniHelper.UniPopup;
  popup?.open();
};

/** 关闭弹窗 */
const close = () => {
  const popup = currentInstance?.refs.popup as UniHelper.UniPopup;
  popup?.close();
};

// 控制二维码显示
const qrcodeVisible = ref(false);

const showQrcode = () => {  
  qrcodeVisible.value = true;
}
const hideQrcode = () => {
  qrcodeVisible.value = false;
  close();
}

defineExpose({
  open,
  close,
});

// #endregion
</script>

<style scoped lang="scss">
.container {
  width: 577rpx;
  padding-top: 31rpx;
  padding-bottom: 46rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  background-color: #fff;
  border-radius: 50rpx;
  .title {
    font-size: 29rpx;
    font-weight: 400;
    color: #333333;
  }

  .security-image {
    width: 292rpx;
    height: 273rpx;
    margin-top: 44rpx;
  }
  .tip {
    margin-top: 19rpx;
    font-size: 27rpx;
    font-weight: 400;
    color: #000000;
  }
  .contact-btn {
    width: 515rpx;
    height: 69rpx;
    background: linear-gradient(270deg, #864ce4 0%, #272fd9);
    border-radius: 50rpx;
    text-align: center;
    line-height: 69rpx;
    font-size: 27rpx;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    line-height: 69rpx;
    margin-top: 37rpx;
  }

  .cancel {
    width: 65rpx;
    height: 65rpx;
    background-size: 100% 100%;
    background-image: url("https://ustatic.joymew.com/%20miao/ywq/close-icon.png");
    position: absolute;
    bottom: -109rpx;
  }

  .qrcode-box {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .qrcode-img {
      width: 520rpx;
      height: 520rpx;
    }
    .close-icon {
      margin-top: 20rpx;
      width: 92rpx;
      height: 92rpx;
    }
  }
}
</style>
